<!doctype html>
</html>
<head>
	<meta charset="utf-8" />

	<style>
		/*::-webkit-scrollbar {*/
			/*width: 6px;*/
			/*height:6px;*/
			/*background-color: #F5F5F5;*/
		/*}*/

		.box{
			width:200px;
			height:200px;
			padding:20px;
			margin:20px;
			border:4px solid gray;
			/*box-sizing: border-box;*/
			overflow: scroll;
			white-space: nowrap;
			word-break: break-all;
		}
		ul{
			list-style-type:none;
		}
	</style>
</head>
<body>
	<div class= "box" id="box">
		<ul id="ul">
			<li class="height">height: <span></span></li>
			<li class="innerHeight">innerHeight:<span></span></li>
			<li class="outerHeight">outerHeight:<span></span></li>

			<li class="offsetheight">offsetheight:<span></span></li>
			<li class="clientheight">clientheight:<span></span></li>
			<li class="scrollHeight">scrollHeight:<span></span></li>
			1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
		</ul>
	</div>
</body>
<script src="../js/jquery.1.9.1.min.js" type="text/javascript" ></script>

<script>
	$(function(){
		var $box = $('#box')
		$('#ul>.height>span').text($box.height());
		$('#ul>.innerHeight>span').text($box.innerHeight());
		$('#ul>.outerHeight>span').text($box.outerHeight());

		$('#ul>.offsetheight>span').text($box[0].offsetHeight);
		$('#ul>.clientheight>span').text($box[0].clientHeight);
		$('#ul>.scrollHeight>span').text(document.getElementsByClassName('box')[0].scrollHeight);
	});
</script>
</html>